*{
    margin:0;
    padding:0;
}
body{
    background:black;
}
.main{
    width:200px;
    height:600px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) rotateZ(15deg);
    padding-top:100px;
    transform-style: preserve-3d;
    perspective: 10000px;
    
}
.main .line{
    width:200px;
    height:30px;
    position: absolute;
    top:calc(50px * var(--d) - 50px);
    animation:roll 4s linear infinite calc(0.3s * var(--d));
}
@keyframes roll{
    100%{
        transform:rotateY(360deg);
    }
}

.main .line::before{
    content:"";
    width:30px;
    height:30px;
    border-radius: 50%;
    background:#e67e22;
    position:absolute;
    left:0;
    animation:deroll 4s  linear infinite calc(0.25s * var(--d));
}
.main .line::after{
    content:"";
    width:30px;
    height:30px;
    border-radius: 50%;
    background:#3498db;
    position:absolute;
    right:0;
}

.main .line span{
    width:140px;
    height:1px;
    background:white;
    position:absolute;
    top:15px;
    left:30px;
}